<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="/layui/css/layui.css" rel="stylesheet">
    <script src="/layui/layui.js"></script>
    <script src="/layui/jquery.min.js"></script>
    <script src="/layui/axios.min.js"></script>
    <script src="/layui/vue.min.js"></script>
</head>
<body>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">修改</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<div style="padding-right: 20px;padding-left: 20px">
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
        <legend>用户信息管理</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-header">用户信息表</div>
                <div class="layui-card-body">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>

    <div class="layui-row layui-col-space15">
        <div class="layui-col-md6">
            <div class="layui-card">
                <div class="layui-card-header">用户角色修改</div>
                <div class="layui-card-body">
                    <form class="layui-form" style="margin-right: 100px">
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户角色</label>
                            <div class="layui-input-block">
                                <select name="id" id="user" lay-verify="title" lay-filter="user">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">用户角色</label>
                            <div class="layui-input-block">
                                <select name="roleId" id="role" lay-verify="title" lay-filter="role">
                                    <option value=""></option>
                                </select>
                            </div>
                        </div>
                        <div style="margin: 20px 20px;text-align: center">
                            <button class="layui-btn layui-btn-primary" lay-submit lay-filter="update">确认修改</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table','form','layedit','layer'],function () {
        var table = layui.table,
            form = layui.form,
            layedit = layui.layedit,
            layer = layui.layer;

        var index = layedit.build('demo')

        axios.get("/role/getRoleForAddUser").then(res => {
            var role = $("#role");
            role.children().remove();
            role.append('<option value=""></option>')
            for (const op of res.data.data) {
                role.append('<option value="'+op.id+'">'+'角色名称:'+op.roleName+',权限描述:' +op.roleDesc+'</option>')
            }
            form.render();
        })

        form.on('submit(update)',function (data){
            console.log(data)
            axios.post("/end/user/update",data.field).then(res => {
                layer.msg(res.data.msg);
            })
            return false
        })

        axios.get("/end/user/getAll").then(res => {
            var user = $("#user");
            user.children().remove();
            user.append('<option value=""></option>')
            for (const op of res.data.data) {
                user.append('<option value="'+op.id+'">'+'用户名称:'+op.userName+'</option>')
            }
            form.render();
        })

        table.render({
            elem: '#test'
            , url: '/end/user/get'
            , cols: [[
                {type:'numbers', fixed: 'left',title:'序号'}
                , {field: 'id', width: 80, title: 'ID', sort: true, fixed: 'left'}
                , {field: 'userName', title: '用户名', sort: true,edit: 'text'}
                , {field: 'userPassword', title: '密码',edit: 'text'}
                , {field: 'roleName', title: '角色名'}
                , {field: 'roleDesc', title: '角色描述'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo', width: 150}
            ]]
            , page: true
        });

        table.on('tool(test)', function(obj){
            var data = obj.data;
            //console.log(obj)
            if(obj.event === 'del'){
                layer.confirm('真的删除行么', function(index){
                    obj.del();
                    axios.post("/end/user/delete/"+data.id).then(res => {
                        layer.msg(res.data.msg);
                    })
                    layer.close(index);
                });
            } else if(obj.event === 'edit'){
                axios.post("/end/user/update",data).then(res => {
                    layer.msg(res.data.msg);
                })
            }
        });


        form.verify({
            title: function(value){
                if(value.length < 1){
                    return '输入项至少得1个字符啊';
                }
            }
            ,image: function (value) {
                if(value.length < 1){
                    return '灾情封面不可以无哇';
                }
            }
            ,pass: [
                /^[\S]{6,12}$/
                ,'密码必须6到12位，且不能出现空格'
            ]
        });

    })
</script>
</html>
